<script>
import {addResizeListener,removeResizeListener} from 'element-ui/lib/utils/resize-event.js';
export default {
    name:'RsScrollbar',
    props:{
        top:{
            type:Number,
            default:0
        },
        left:{
            type:Number,
            default:0
        },
        right:{
            type:Number,
            default:0
        },
        bottom:{
            type:Number,
            default:0
        }
    },
    data(){
        return {
            
        }
    },
    mounted(){
        addResizeListener(this.$el,()=>{
            this.$refs.scrollbar.update();
        })
    },
    destroyed(){
        removeResizeListener(this.$el);
    },
    render(){
        const {top,left,right,bottom} = this;
        const style = {
            top:`${top}px`,
            left:`${left}px`,
            right:`${right}px`,
            bottom:`${bottom}px`
        };
        return (
            <el-scrollbar ref="scrollbar" class="rs-scrollbar" wrap-class="wrap" style={style}>
                {this.$slots.default}
            </el-scrollbar>
        )
    }
}
</script>